<template>
  <div class="padding">
    <el-menu
        mode="horizontal"
        text-color="#000000"
        active-text-color="skyblue"
        router
    >
      <img src="@/assets/logo.png" class="logo"/>


      <el-menu-item index="dashboard">首页</el-menu-item>
      <el-menu-item index="hotel">婚宴场地</el-menu-item>
      <el-menu-item index="goods">婚品商城</el-menu-item>
      <el-menu-item index="photo">婚纱摄影</el-menu-item>
      <el-menu-item index="shoppingcar">我的购物车</el-menu-item>
      <el-menu-item index="myorder">我的订单</el-menu-item>
      <el-menu-item index="about">关于</el-menu-item>
      <el-submenu index="2" class="submenu">
        <template slot="title">{{ user }}</template>
        <el-menu-item index="/login">登录</el-menu-item>
        <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import Request from "../../api/request";

export default {
  mounted() {
    if (Boolean(localStorage.getItem("token"))) {
      this.getuser()
    }
  },
  methods: {
    getuser() {
      console.log("aa")
      Request.get("/profiled").then(res => {
        console.log(res)
        this.user = res.data
      })
    },
    exit() {
      this.user = '请登录'
      localStorage.removeItem("token")
    }
  },
  data() {
    return {
      user: '请登录'
    };
  },

};
</script>

<style lang="less" scoped>
.padding {
  display: flex;
  justify-content: center;
  //width: 100%;
  padding-top: 60px;

  .el-menu {
    position: fixed;
    justify-content: center;
    display: flex;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    .logo {
      margin-right: 20px;
      height: 30px;
      margin-top: 15px;
    }
  }
}
</style>
